<template>
  <div>
      <!-- {{ 表达式 }} -->
      <!-- 表达式： 能够产生值 -->
      <h3>{{ 1 + 1 }}</h3>
      <h3 @click="updTitle">{{ title.toUpperCase() }}</h3>
      <button @click="addHobby">添加爱好</button>
      <ul>
        <li v-for="(item, index) in hobbys" :key="index">{{ item }}</li>
      </ul>
  </div>
</template>

<script setup >
//两个响应式Api:
//  ref(任意数据类型)： 逻辑中操作需要通过.value去操作,模板中直接去使用即可，因为会自动解包
// repactive(数组/对象)
import { ref } from 'vue'
const title = ref('hello')
const hobbys = ref(['篮球', '乒乓球', '台球'])

const updTitle = () => {
  title.value = 'world'
}

const addHobby = () => {
  hobbys.value.unshift('羽毛球')
  hobbys.value.push('地球')
}

</script>


